<template>
    <view>
        <div class="wrap">
            <div class="header">
                <div class="main">
                    <div class="title fx jcc">
                        <mini-nav v-if="shop"></mini-nav>
                        <template v-else>
                            <div
                                class="back fx jcc"
                                @click="back"
                                v-if="!isTab"
                            >
                                <Nimg src="back.png" width="80" height="88" />
                            </div>
                        </template>
                        <slot />
                    </div>
                </div>
                <div class="bg"></div>
            </div>
        </div>
        <div style="height: 180rpx"></div>
    </view>
</template>

<script>
import $ from "@/common";
export default {
    name: "Header",
    props: {
        isTab: {
            default: false,
            type: Boolean,
        },
        shop: {
            default: false,
            type: Boolean,
        },
    },
    data() {
        return {};
    },
    methods: {},
    mounted() {},
};
</script>

<style lang="less" scoped>
.wrap {
    position: fixed;
    z-index: 1;
    background: #eef7e8;
}

.header {
    width: 750rpx;
    position: relative;
    height: 180rpx;

    .bg {
        position: absolute;
        z-index: 1;
        left: 0;
        bottom: 0;
        background: #fff;
        width: 750rpx;
        height: 180rpx;
    }

    .main {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 60rpx;
        width: 750rpx;

        .title {
            font-size: 34rpx;
            color: #000000;
            position: relative;
            height: 120rpx;
            font-weight: bold;

            .back {
                position: absolute;
                left: 0;
                top: 0;
                width: 80rpx;
                height: 120rpx;
            }
        }
    }
}
</style>
